﻿<!DOCTYPE html>
<html lang="en">

<head>
    <link href="~/element-plus/dist/index.css" rel="stylesheet" />
    <link href="~/css/table.css" rel="stylesheet" />
    <script src="~/vue/dist/vue.global.js"></script>
    <script src="~/element-plus/dist/index.full.js"></script>
    <script src="~/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <table width="100%">
            <tr>
                <td colspan="2" style="text-align: left">
                    <font color="black">
                        您正在做的业务是:人力资源管理--薪酬发放管理--薪酬发放查询
                    </font>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right;">
                    <el-button v-on:click="close()">返回</el-button>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: left">
                    薪酬单编号：{{randomNumber}}
                    <input type="hidden" name="salaryGrant.salaryGrantId" value="HS1353753198460">
                </td>
            </tr>
            <tr>
                <td style="text-align: left">
                    本机构总人数:{{count}}
                    <input type="hidden" name="salaryGrant.humanAmount" value="5">
                    ，基本薪酬总数:{{salary}}
                    ，实发总额:{{pSalary}}

                </td>
                <td style="text-align: right;">
                    登记人：<input type="text" name="salaryGrant.register" v-model="tName" size="8" readonly="readonly">
                    登记时间：<span id="Tdate"></span>
                    <input v-model="tTime" readonly>
                </td>
            </tr>
        </table>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
            <el-table-column prop="humanId" label="档案编号"></el-table-column>
            <el-table-column prop="humanName" label="姓名"></el-table-column>
            <el-table-column label="薪酬基本明细">
                <template #default="scope">
                    <span style="color:blue" class="btn" v-on:click="info(scope.row)">详细金额</span>
                </template>
            </el-table-column>
            <el-table-column label="奖励金额">
                <template #default="scope">
                    <el-input v-model="scope.row.bounsSum" placeholder="奖励金额" readonly />
                </template>
            </el-table-column>
            <el-table-column label="销售绩效总额">
                <template #default="scope">
                    <el-input v-model="scope.row.saleSum" placeholder="销售绩效总额" readonly />
                </template>
            </el-table-column>
            <el-table-column label="应扣金额">
                <template #default="scope">
                    <el-input v-model="scope.row.deductSum" placeholder="应扣金额" readonly />
                </template>
            </el-table-column>
            <el-table-column label="实发金额">
                <template #default="scope">
                    <el-input v-model="scope.row.salaryPaidSum" placeholder="实发金额" readonly />
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible"
                   title=""
                   width="500"
                   :before-close="handleClose">
            <table border="1">
                <tbody v-for="item in ssd">
                    <tr>
                        <td width="250px" style="background-color:white;border: 1px solid black;">{{item.itemName}}</td>
                        <td width="250px" style="background-color:white;border: 1px solid black;">{{item.salary}}</td>
                    </tr>
                </tbody>
            </table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" v-on:click="reset()">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
</html>
<style>
    tbody,
    td,
    tfoot,
    th,
    thead,
    tr {
        border-color: inherit;
        background-color: #ffffbb;
        border-style: solid;
        border-width: 0;
    }
</style>
<script>
    const { createApp, ref, reactive, watchEffect } = Vue;
    const { ElMessage } = ElementPlus;
    var app = createApp({
        setup() {
            const tableData = ref([]);
            const indexMethod = (index) => {
                return index + 1;
            };
            const tName = ref(""); // 登记人
            const tTime = ref(""); // 登记时间
            const salary = ref(0); // 基本薪酬总额
            const pSalary = ref(0); // 实发总额
            const count = ref(0); // 总人数
            const randomNumber = ref("") // 薪酬发放编号
            const dialogVisible = ref(false)
            const ssd = ref([])
            const sgrId = ref("")//主键
            const salaryStandardId = ref("") // 薪酬标准单号

            // 填充数据的函数
            function fill() {
                axios.get("/SG/SGByIdAsync").then(res => {
                    console.info(res.data)
                    sgrId.value = res.data.sgrId
                    randomNumber.value = res.data.salaryGrantId
                    pSalary.value = res.data.salaryPaidSum
                    count.value = res.data.humanAmount
                    tName.value = res.data.register
                    tTime.value = res.data.registTime
                    salaryStandardId.value = res.data.salaryStandardId
                    axios.get("/SG/SGDByIdAsync", {
                        params: {
                            id: res.data.salaryGrantId
                        }
                    }, {
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded",
                            //或其他格式
                        }
                    }).then(res => {
                        tableData.value = res.data
                        console.info(tableData.value)
                        // for (var i = 0; i < tableData.value.length; i++) {
                        //     salary.value += tableData.value[i].salaryStandardSum;
                        // }
                        for (let i = 0; i < tableData.value.length; i++) {
                            axios.get("/SG/HFByIDReviewAsync",{
                                params:{
                                    id:tableData.value[i].humanId
                                }
                            }).then(res =>{
                                salary.value += res.data.salarySum;
                                //res.data.paidSalarySum = tableData.value[i].salaryPaidSum
                                tableData.value[i].salaryStandardId = res.data.salaryStandardId
                            }).catch(error =>{
                                console.info(error)
                            })
                        }
                    }).catch(Error => {
                        console.info(Error)
                    })
                }).catch(Error => {
                    console.info(Error);
                });
            }
            fill();

            function info(row) {
                console.info(row)
                dialogVisible.value = true
                axios.get("/SG/SSDSelectBySid",{
                    params:{
                        sid:row.salaryStandardId
                    }
                }).then(res =>{
                    ssd.value = res.data
                }).catch(Error =>{
                    console.info(Error)
                })
            }

            function close() {
                window.history.back();
            }

            function reset(){
                dialogVisible.value = false
            }

            return {
                tableData,
                indexMethod,
                tName,
                tTime,
                salary,
                pSalary,
                count,
                dialogVisible,
                info,
                close,info,randomNumber,ssd,reset,salaryStandardId
            };
        }
    });
    app.use(ElementPlus);
    app.mount("#app");
</script>